import React, { ReactNode } from 'react'
import { ThemeToggle } from './ThemeToggle'
import { Link, useLocation } from 'react-router-dom'
import { Server, FileText, Settings } from 'lucide-react'

type LayoutProps = {
  children: ReactNode
}

export function Layout({ children }: LayoutProps): JSX.Element {
  const location = useLocation()
  const isActive = (path: string) => location.pathname === path
  return (
    <div className="shell">
      <aside className="sidebar">
        <div className="sidebar-brand">
          <div className="brand-mark">ASM</div>
          <div className="brand-name">AI Server Monitor</div>
        </div>
        <nav className="nav">
          <div className="nav-group">
            <div className="nav-section">监控</div>
            <Link className={`nav-link ${isActive('/') ? 'is-active' : ''}`} to="/">
              <Server size={16} />
              <span>服务器</span>
            </Link>
            <Link className={`nav-link ${isActive('/logs') ? 'is-active' : ''}`} to="/logs">
              <FileText size={16} />
              <span>会话日志</span>
            </Link>
          </div>
          <div className="nav-group">
            <div className="nav-section">系统</div>
            <Link className={`nav-link ${isActive('/settings') ? 'is-active' : ''}`} to="/settings">
              <Settings size={16} />
              <span>设置</span>
            </Link>
            <a className="nav-link" href="#">
              <span>关于</span>
            </a>
          </div>
        </nav>
      </aside>
      <div className="workspace">
        <header className="topbar">
          <div className="topbar-left">
            <div className="topbar-title">概览</div>
            <div className="topbar-subtitle muted">管理服务器与会话</div>
          </div>
          <div className="topbar-right">
            <div className="search">
              <input className="input" placeholder="搜索（名称/主机）" />
            </div>
            <ThemeToggle />
          </div>
        </header>
        <main className="content-area">
          {children}
        </main>
      </div>
    </div>
  )
}

